<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>web页面广告制作</title>
		<219970501 蔡尚儒>
	</head>
	<style type="text/css">
		#zuo{
			width: 100px;
			height: 666px;
			background-color: aliceblue;
			position: fixed;
			top: 0px;
			left: 300px;
		}
		#you{
			width: 100px;
			height: 666px;
			 background-color: aliceblue;
			 position: fixed;
			 top: 0px;
			 right:300px;
		}

	.text{
			width: 50%;
			height: 1600px;
			 background-color: aqua;
			  margin: auto;
			  margin-top: 30px;
		}


		*{
			margin: 0;
		}
		#box{
			width: 180px;
			height: 180px;
			background-color: azure;
			position: fixed;
			right: 0;
			bottom: -180px;
		}
		span{
			cursor: pointer;
		}	
		.close{
			width: ;
           cursor: pointer;
		}
		
	</style>
	<body>
	<div>
		<div id="zuo"> 
		<span onclick="removeImg()">关闭</span><img src="1.jpg" width="100" height="666"/></div>
	</div>
		<div>
			<div id="you"> 	
			<span onclick="removeImg()">关闭</span><img src="1.jpg" width="100" height="666"/></div>
		</div>
       <div class="text"></div>
		<div id="box">
			<span onclick="guanbi()">关闭</span>
		<img src="1.jpg"/>
		</div>
	</body>
	<script>
		var box=document.getElementById("box");
		// 定时器
		function moveUp(){
			var css=document.defaultView.getComputedStyle(box,null);
	        var bottom=parseInt(css.bottom);
	        if(bottom!=0){
	        	bottom+=9;
	        	box.style.bottom=bottom+"px";
	        }
	        else{
	            clearInterval(timer1);
	            timer1=null;
	        }
		}
		var timer1=null;
		function dakai(){
		    timer1=setInterval(moveUp,100);
		}
		//页面加载后打开
		window.onload=dakai;
		
		// 定时器
		    function moveDown(){
			  var css=document.defaultView.getComputedStyle(box,null);
	          var bottom=parseInt(css.bottom);
	            if(bottom!= -180){
	            	bottom-=9;
	            	box.style.bottom=bottom+"px";
	            }
	            else{
	                clearInterval(timer2);
	                timer2=null;
	                var timer3=null;
	                timer3=setTimeout(dakai,5000);
	            }
		    }
		//选择关闭键后关闭
	    var timer2=null;
		function guanbi(){
		  clearInterval(timer1);
		  timer1=null;
		  timer2=setInterval(moveDown,100);}
		  //关闭对联广告
			function removeImg() {
			let zuo=document.getElementById("zuo");
			let you=document.getElementById("you");
			zuo.remove()
			you.remove()
			document.body.removeChild(img);
			document.body.removeChild(img2);
		}
	</script>
</html>

